<template>
  <div class="bg-white rounded-xl shadow-custom p-6">
    <div class="flex items-center justify-between mb-6">
      <h3 class="text-lg font-semibold text-gray-800">待办事项</h3>
      <button 
        class="text-sm font-medium text-primary hover:text-primary/80 transition-custom"
        @click="showAddForm = true"
      >
        <i class="fa fa-plus mr-1"></i> 添加
      </button>
    </div>
    <div class="space-y-4">
      <div v-if="showAddForm" class="mb-4">
        <form @submit.prevent="handleAdd" class="flex items-center space-x-2">
          <input 
            v-model="newTodo"
            type="text"
            class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary outline-none transition-custom"
            placeholder="输入待办事项..."
            ref="todoInput"
          >
          <button 
            type="submit"
            class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-custom"
          >
            添加
          </button>
        </form>
      </div>
      <div 
        v-for="todo in todos" 
        :key="todo.id"
        class="flex items-center p-3 border border-gray-100 rounded-lg hover:bg-gray-50 transition-custom"
      >
        <input 
          type="checkbox" 
          :checked="todo.completed"
          class="h-5 w-5 text-primary focus:ring-primary border-gray-300 rounded"
          @change="$emit('toggle', todo.id)"
        >
        <span 
          class="ml-3"
          :class="todo.completed ? 'text-gray-400 line-through' : 'text-gray-800'"
        >
          {{ todo.text }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TodoList',
  props: {
    todos: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      showAddForm: false,
      newTodo: ''
    }
  },
  methods: {
    handleAdd() {
      if (this.newTodo.trim()) {
        this.$emit('add', this.newTodo.trim())
        this.newTodo = ''
        this.showAddForm = false
      }
    }
  },
  watch: {
    showAddForm(val) {
      if (val) {
        this.$nextTick(() => {
          this.$refs.todoInput.focus()
        })
      }
    }
  }
}
</script> 